﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
    <div class="container">
        <BitNavBar TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="Disabled" RazorCode="@example2RazorCode" Id="example2">
    <div>Disabled:</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" IsEnabled="false">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Disabled item:</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" IsEnabled="false" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="Manual Mode" RazorCode="@example3RazorCode" Id="example3">
    <div>Defines the mode in which the selected item is handled manually, instead of automatically using the current url.</div>
    <br /><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="IconOnly" RazorCode="@example4RazorCode" Id="example4">
    <div>Only renders the icon of each navbar item.</div>
    <br /><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" IconOnly>
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="FitWidth" RazorCode="@example5RazorCode" Id="example5">
    <div>Enables fit-content width for the nav bar that sets the width of the component based on its content size.</div>
    <br /><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" FitWidth>
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="Templates" RazorCode="@example6RazorCode" Id="example6">
    <div>Explore BitNavBar's customization capabilities.</div>
    <br /><br />
    <div>ItemTemplate:</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption">
            <Options>
                <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
                <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
                <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
                <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
            </Options>
            <ItemTemplate Context="option">
                <BitText Typography="BitTypography.Caption1" Color="BitColor.Warning">@option.Text</BitText>
                <BitIcon IconName="@option.IconName" Color="BitColor.Success" />
            </ItemTemplate>
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Item's template:</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products">
                <Template Context="option">
                    <div style="display:flex;flex-direction:column"><b>@option.Text</b><span>🎁</span></div>
                </Template>
            </BitNavBarOption>
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div>Managing NavBar item click event (OnItemClick).</div>
    <br /><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" OnItemClick="(BitNavBarOption option) => eventsClickedOption = option">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br />
    Clicked item: @eventsClickedOption?.Text
</DemoExample>

<DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
    <br /><br />
    <div>DefaultSelectedItem (not available):</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" IsEnabled="false">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br />
    @* Selected option: @selectedOption?.Text *@
    <br /><br /><br /><br />
    <div>Two-way SelectedItem:</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" @bind-SelectedItem="twoWaySelectedOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" @ref="optionHome" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" @ref="optionProducts" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" @ref="optionAcademy" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" @ref="optionProfile" />
        </BitNavBar>
    </div>
    <br />
    <BitChoiceGroup Horizontal TItem="BitChoiceGroupOption<BitNavBarOption>" TValue="BitNavBarOption" @bind-Value="@twoWaySelectedOption">
        <BitChoiceGroupOption Text="Home" Id="Home" Value="optionHome" />
        <BitChoiceGroupOption Text="Products" Id="Products" Value="optionProducts" />
        <BitChoiceGroupOption Text="Academy" Id="Academy" Value="optionAcademy" />
        <BitChoiceGroupOption Text="Profile" Id="Profile" Value="optionProfile" />
    </BitChoiceGroup>
</DemoExample>

<DemoExample Title="Reselectable" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <div>Enables the ability to trigger select event even when the same item is selected again.</div>
    <br /><br />
    <BitToggle @bind-Value="reselectable" OnText="Enabled recalling" OffText="Disabled recalling" />
    <br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" OnItemClick="(BitNavBarOption option) => countClick++" Reselectable="reselectable">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br />
    Item click count: @countClick
</DemoExample>

<DemoExample Title="Advanced" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div>An illustrative example of integrating this component into a straightforward mobile application.</div>
    <br /><br />
    <div class="mobile-frame">
        <div class="screen">
            <BitSticky Top="0">
                <BitCard FullWidth>
                    <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
                        <BitImage Src="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" Width="50" />
                        <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                            bit BlazorUI
                        </BitText>
                    </BitStack>
                </BitCard>
            </BitSticky>
            <BitStack Alignment="BitAlignment.Center" AutoHeight Grows>
                <BitText Typography="BitTypography.H4" Color="BitColor.PrimaryForeground">
                    <BitIcon IconName="@advancedSelectedOption?.IconName" Color="BitColor.PrimaryForeground" Size="BitSize.Large" />
                    <span>@advancedSelectedOption?.Text</span>
                </BitText>
            </BitStack>
            <BitSticky Bottom="0">
                <BitCard FullWidth Style="padding:2px">
                    <BitNavBar TItem="BitNavBarOption" Mode="BitNavMode.Manual" @bind-SelectedItem="advancedSelectedOption">
                        <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
                        <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
                        <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
                        <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
                    </BitNavBar>
                </BitCard>
            </BitSticky>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Color" RazorCode="@example11RazorCode" Id="example11">
    <div>Offering a range of specialized colors, providing visual cues for specific states within your application.</div>
    <br /><br />
    <div>Primary:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Primary" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Secondary:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Secondary" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Tertiary:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Tertiary" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Info:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Info" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Success:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Success" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Warning:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Warning" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>SevereWarning:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.SevereWarning" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Error:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Error" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
        <div style="color:var(--bit-clr-bg-pri)">PrimaryBackground:</div><br />
        <div class="container">
            <BitNavBar Color="BitColor.PrimaryBackground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
                <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
                <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
                <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
                <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
            </BitNavBar>
        </div>
        <br /><br /><br /><br />
        <div style="color:var(--bit-clr-bg-sec)">SecondaryBackground:</div><br />
        <div class="container">
            <BitNavBar Color="BitColor.SecondaryBackground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
                <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
                <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
                <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
                <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
            </BitNavBar>
        </div>
        <br /><br /><br /><br />
        <div style="color:var(--bit-clr-bg-ter)">TertiaryBackground:</div><br />
        <div class="container">
            <BitNavBar Color="BitColor.TertiaryBackground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
                <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
                <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
                <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
                <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
            </BitNavBar>
        </div>
    </div>
    <br /><br /><br /><br />
    <div>PrimaryForeground:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.PrimaryForeground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>SecondaryForeground:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.SecondaryForeground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>TertiaryForeground:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.TertiaryForeground" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>PrimaryBorder:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.PrimaryBorder" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>SecondaryBorder:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.SecondaryBorder" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>TertiaryBorder:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.TertiaryBorder" TItem="BitNavBarOption" Mode="BitNavMode.Manual">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" Id="example12">
    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
    <br /><br />
    <div>Component's Style:</div><br />
    <div class="container">
        <BitNavBar Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;" TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br />
    <div>Component's Class:</div><br />
    <div class="container">
        <BitNavBar Class="custom-class" TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Item's style & class:</div><br />
    <div class="container">
        <BitNavBar TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" Class="custom-item" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" Style="color: #b6ff00;font-weight: 600;" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Styles:</div><br />
    <div class="container">
        <BitNavBar Styles="@(new() { ItemIcon = "color: aqua;", ItemText = "color: tomato;" })" TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
    <br /><br />
    <div>Classes:</div><br />
    <div class="container">
        <BitNavBar Classes="@(new() { ItemIcon = "custom-item-ico", ItemText = "custom-item-txt" })" TItem="BitNavBarOption">
            <BitNavBarOption Text="Home" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="Products" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="Academy" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="Profile" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
    <div>Use BitNavBar in right-to-left (RTL).</div>
    <br /><br />
    <div dir="rtl" class="container">
        <BitNavBar Dir="BitDir.Rtl" TItem="BitNavBarOption">
            <BitNavBarOption Text="خانه" IconName="@BitIconName.Home" />
            <BitNavBarOption Text="محصولات" IconName="@BitIconName.ProductVariant" />
            <BitNavBarOption Text="آکادمی" IconName="@BitIconName.LearningTools" />
            <BitNavBarOption Text="پروفایل" IconName="@BitIconName.Contact" />
        </BitNavBar>
    </div>
</DemoExample>